<script setup lang="ts">
import { counterStore } from "@/stores/counter";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
//const {count,addCount,cutCon=unt}=counterStore()//v3的仓库结构会失去响应式
const store = counterStore(); //v3的仓库结构会失去响应式
const router = useRouter();
</script>

<template>
  <div>
    <h1>全局计数器</h1>
    <div class="counter">
      <button @click="store.cutCount">-</button>
      <span>{{ store.count }}</span>
      <button @click="store.addCount">+</button>
    </div>
    <p>
      <button @click="router.push('/anothercounter')">去另外的测试页面</button>
    </p>
  </div>
</template>

<style scoped>
.counter {
  width: 100%;
  text-align: center;
  height: 400px;
  line-height: 400px;
}

.counter button,
.counter span {
  margin: 20px;
  width: 100px;
  height: 40px;
  font-size: 20px;
}
</style>
